<template>
	<view class="content">
		<!-- <my-bar>
			<block slot="content">登录</block>
		</my-bar> -->
		<view class="login-bg" :class="theme">
			<view class="login-card">
				<view class="login-head"><text>登录</text></view>
				<view class="login-input login-margin-b"><mInput type="text" v-model="userinfo.username" placeholder="请输入用户名" clearable="true"></mInput></view>
				<view class="login-input"><mInput type="password" v-model="userinfo.password" placeholder="请输入密码" clearable="true" displayable="true"></mInput></view>
				<view class="login-function">
					<!-- <navigator class="login-register" url="../reg/reg">快速注册></navigator> -->
					<!-- <navigator class="login-forget" url="../pwd/pwd">忘记密码</navigator> -->
				</view>
			</view>
		</view>
		<view class="login-btn"><button class="landing" :class="theme" type="primary" @click="login()">登陆</button></view>

		<view class="oauth">
			<view class="oauth-row">
				<!-- 微信小程序登录 -->
				<!--#ifdef MP-WEIXIN-->
				<button @click="wxMpLogin"><image src="https://haolaoshiya.com/img/wx.png"></image></button>
				<!--#endif-->
				<!-- APP端微信登录 -->
				<!--#ifdef APP-PLUS-->
				<button @click="wxAppLogin()"><image src="https://haolaoshiya.com/img/wx.png"></image></button>
				<!--#endif-->
			</view>
		</view>
	</view>
</template>

<script>
import mInput from '../../components/m-input/m-input.vue';
import api from '@/common/api.js';
import baseMixin from '@/mixin/base.js';
import { mapState } from 'vuex';
export default {
	components: {
		mInput
	},
	mixins: [baseMixin],
	computed: {	
		...mapState('base', ['logo', 'appName','theme']),		
	},
	data() {
		return {
			userinfo: {
				username: '',
				password: '',
				email: ''
			}
		};
	},
	onLoad(e) {},
	methods: {
		//验证规则检查
		check() {
			//验证规则
			let validRules = [
				{
					name: 'username',
					title: '用户名',
					required: true,
					minLength: 3
				},
				{
					name: 'password',
					type: 'password',
					title: '密码',
					required: true,
					minLength: 6
				}
			];
			return this.$validate.valid(this.userinfo, validRules);
		},
		/**
		 * 普通账密码登录
		 */
		login() {
			var r = this.check();
			if (!r.isOk) {
				this.$util.msg(r.msg);
			} else {
				api.login(this.userinfo);
			}
		},
		/**
		 * 微信小程序登录
		 * @param {Object} e
		 */
		wxMpLogin: function(e) {
			var that = this;
			uni.showLoading({
				title: '登录中'
			});
			function _login(userInfo) {
				//登录
				uni.login({
					success(res) {
						//{errMsg: "login:ok", code: "033vPJhy1W2RH906Y0gy1B5Chy1vPJhO"}
						//console.log(res);
						if (res.code) {
							uni.hideLoading();
							// 发起网络请求
							api.wxMplogin({
								code: res.code,
								username: userInfo.nickName,
								avatar: userInfo.avatarUrl
							});
						} else {
							uni.hideLoading();
							that.$util.msg('登录失败！' + res.errMsg);
							//console.log('登录失败！' + res.errMsg);
						}
					}
				});
			}

			// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
			// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
			uni.getUserProfile({
				desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
				success: res => {
					console.log(res.userInfo);
					_login(res.userInfo);
				}
			});
		},
		/**
		 * APP端微信登录
		 */
		wxAppLogin: function() {
			var that = this;
			uni.getProvider({
				service: 'oauth',
				success: function(res) {
					//console.log(res);
					if (~res.provider.indexOf('weixin')) {
						//this.loadModal = true;
						uni.showLoading({
							title: '登录中'
						});
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								//console.log(JSON.stringify(loginRes));
								// 服务端登录
								// 发起网络请求
								api.wxAppLogin({
									access_token: loginRes.authResult.access_token, //传给后台，后台拿code解析，返回用户数据
									openid: loginRes.authResult.openid
								}).then(r => {
									uni.hideLoading();
								});
								/* uni.getUserInfo({
									provider: 'weixin',
									success: function(infoRes) {
										console.log(JSON.stringify(infoRes));
										var info = infoRes;
										var opid = info.userInfo.openId;
										that.userInfo = {
											nickName: info.userInfo.nickName,
											avatarUrl: info.userInfo.avatarUrl
										};
										try { 
											uni.setStorageSync('openid', opid);
										} catch (e) {
											// error
										}
										this.loadModal = false;
									}
								}); */
							}
						});
					}
				}
			});
			// #ifdef APP-PLUS
			//app端登录获取code传递给服务器进行登录，客户端不保存APPsecrect安全系数高
			//参考https://www.jianshu.com/p/eb538af98fbd
			/* plus.oauth.getServices(
				function(services) {
					var auths = [];
					for (var i = 0; i < services.length; i++) {
						auths[services[i].id] = services[i];
					}
					var aweixin = auths['weixin'];
					//console.error(aweixin);
					if (!aweixin) {
						plus.nativeUI.alert('当前环境不支持微信登录');
						return;
					}
					// 获取code传给后台
					aweixin.authorize(
						function(e) {
							console.log('获取code：' +JSON.stringify(e));
							// 服务端登录
							// 发起网络请求
							api.wxAppLogin({ 
								code: e.code//传给后台，后台拿code解析，返回用户数据								
							});							
						},
						function(e) {
							plus.nativeUI.alert('授权失败：' + JSON.stringify(e));
							//console.log(JSON.stringify(e));
						},
						{
							scope: 'snsapi_userinfo'
						}
					);
				},
				function(e) {
					plus.nativeUI.alert('获取登录授权服务列表失败：' + JSON.stringify(e));
				}
			); */
			// #endif
		}
	}
};
</script>

<style lang="scss">
.landing {
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 25rpx;
	font-size: 36rpx;
	/* background: linear-gradient(left,#FF978D, #FFBB69); */
}
.login-btn {
	padding: 10rpx 20rpx;
	margin-top: 350rpx;
}
.login-function {
	overflow: auto;
	padding: 20rpx 20rpx 30rpx 20rpx;
}
.login-forget {
	float: left;
	font-size: 28rpx;
	color: #999;
}
.login-register {
	color: #666;
	float: right;
	font-size: 28rpx;
}
.login-input .m-input-view {
	background: #f2f5f6;
	padding: 12rpx 25rpx;
	height: 92rpx;
	line-height: 92rpx;
	border-radius: 10rpx;
}
.login-input :deep(.m-input-input) {
	font-size: 34rpx;
}
.m-input-view {
	color: #666666;
}
.login-margin-b {
	margin-bottom: 25rpx;
}
.login-input {
	padding: 10rpx 20rpx;
}
.login-head {
	font-size: 42rpx;
	text-align: center;
	font-weight: bold;
	color: #666666;
	padding: 25rpx 10rpx 55rpx 10rpx;
}
.login-card {
	background: #fff;
	border-radius: 12rpx;
	padding: 10rpx 25rpx;
	box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.12);
	position: relative;
	margin-top: 200rpx;
}
.login-bg {
	height: 400rpx;
	padding: 30rpx;
	/* background: linear-gradient(#FF978D, #FFBB69); */
}
.oauth {
	position: absolute;
	bottom: 40rpx;
	left: 0;
	width: 100%;
}
.oauth-row {
	display: flex;
	margin: 0 40rpx;
	text-indent: 25rpx;
}
.oauth-row button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border: none;
}
.oauth-row button:after {
	content: none;
}
.oauth-row button::after {
	border: none;
}
.oauth-row image {
	width: 60rpx;
	height: 60rpx;
}
</style>
